<template>
  <div>
    <div class="mlt">
      <el-button
        v-permissions="{ permission: ['add:Department'] }"
        type="primary"
        @click="addDepartments"
      >
        添加部门
      </el-button>
    </div>
    <div class="mlt">
      <el-table :data="tableData" :empty-text="emptyText" style="width: 100%">
        <el-table-column label="创建时间" prop="created_at" width="180" />
        <el-table-column label="部门名称" prop="dept_name" width="180" />
        <el-table-column label="是否正常启用" prop="">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.dept_status == 'Y'" type="success">
              是
            </el-tag>
            <el-tag v-if="scope.row.dept_status == 'N'" type="danger">
              否
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-permissions="{ permission: ['edit:Department'] }"
              size="mini"
              type="primary"
              @click="updataDepartment(scope.row)"
            >
              修改
            </el-button>
            <el-button
              v-permissions="{ permission: ['delete:Department'] }"
              size="mini"
              type="danger"
              @click="delDepartments(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="total != ''">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog title="部门" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" label-width="80px" :model="form">
        <el-form-item label="部门名称">
          <el-input v-model="parameter.dept_name" />
        </el-form-item>
        <el-form-item label="部门颜色">
          <div class="block">
            <div style="width: 80px; height: 80px; background: #f8f8f8">
              <el-color-picker
                v-model="parameter.color_code"
                style="margin: 24px"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="部门简介">
          <el-input v-model="parameter.dept_desc" />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-select
            v-model="enable"
            placeholder="是否启用"
            @change="enableChange"
          >
            <el-option
              v-for="item in enableShow"
              :key="item.dept_status"
              :label="item.name"
              :value="item.dept_status"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="是否可预约">
          <el-select
            v-model="appointment"
            placeholder="是否可预约"
            @change="appointmentChange"
          >
            <el-option
              v-for="item in appointmentShow"
              :key="item.dept_status"
              :label="item.name"
              :value="item.dept_status"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="工作方式">
          <el-select
            v-model="workModeValue"
            clearable
            placeholder="请选择"
            @change="workModeChange"
          >
            <el-option
              v-for="item in workMode"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="SubmitClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getDepartmentList,
    addDepartment,
    delDepartment,
  } from '@/api/addOrganization'

  export default {
    name: 'Reception',
    data() {
      return {
        // 颜色
        color1: '',
        page: 1,
        total: '',
        emptyText: ' ',
        tableData: [],
        dialogVisible: false,
        form: {},
        selectValue: '',
        appointment: '',
        pid: 0,
        optionData: [],
        parameter: {
          color_code: '',
          dept_desc: '',
          dept_name: '',
          dept_status: '',
          dept_work_type: '',
        },
        enable: ' ',
        enableShow: [
          {
            dept_status: 'Y',
            name: '是',
          },
          {
            dept_status: 'N',
            name: '否',
          },
        ],
        appointmentShow: [
          {
            dept_status: 'Y',
            name: '可以预约',
          },
          {
            dept_status: 'N',
            name: '不可以预约',
          },
        ],
        workMode: [
          {
            id: 'mec_inside',
            name: '机构内工作方式',
          },
          {
            id: 'mec_external',
            name: '机构外工作方式',
          },
          {
            id: 'mec_other',
            name: '其他工作方式',
          },
        ],
        workModeValue: '',
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        this.Department()
      },
      // 获取组织 科室
      Department() {
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        const data = {
          page: this.page,
          pagesize: '10',
        }
        getDepartmentList(data).then((res) => {
          this.total = res.data.total
          this.tableData = res.data.data
          loading.close()
          if (res.data.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
      // 修改组织
      updataDepartment(e) {
        this.parameter.dept_name = e.dept_name
        this.parameter.color_code = e.color_code
        this.parameter.dept_desc = e.dept_desc
        this.parameter.id = e.id
        this.parameter.dept_work_type = e.dept_work_type
        this.parameter.dept_status = e.dept_status
        this.enableShow.forEach((j) => {
          if (j.dept_status == e.dept_status) {
            this.enable = j.name
          }
        })
        this.workMode.forEach((i) => {
          if (i.id == e.dept_work_type) {
            this.workModeValue = i.name
          }
        })

        this.dialogVisible = true
      },
      // 删除组织
      delDepartments(e) {
        this.$confirm('此操作将为删除该部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const id = e
            delDepartment(id).then(() => {
              this.init()
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      },
      // 添加组织
      addDepartments() {
        this.parameter = {
          color_code: '',
          dept_desc: '',
          dept_name: '',
          dept_status: 'Y',
          dept_work_type: 'mec_inside',
        }
        this.workModeValue = 'mec_inside'
        this.enable = 'Y'
        this.dialogVisible = true
      },
      // 下拉框选择组织
      handleChange(e) {
        this.parameter.parent_id = e
      },

      // 是否启用
      enableChange(e) {
        this.parameter.dept_status = e
      },
      // 是否参加预约
      appointmentChange(e) {
        this.parameter.reservation_func = e
      },
      //工作方式
      workModeChange(e) {
        this.parameter.dept_work_type = e
      },

      // 新增组织提交按钮
      SubmitClick() {
        const jy = {
          color_code: '请选择科室颜色',
          dept_desc: '请输入部门简介',
          dept_name: '请输入部门名称',
          dept_status: '请选择是否启用',
          dept_work_type: '请选择工作方式',
        }
        if (Object.keys(this.parameter).length === 0) {
          this.$message.error('请填写信息')
          return
        } else {
          for (var key in this.parameter) {
            if (this.parameter[key] == '') {
              this.$message.error(jy[key])
              return
            }
          }
        }
        addDepartment(this.parameter)
          .then(() => {
            this.$message({
              type: 'success',
              message: '成功!',
            })
            this.init()
            this.parameter = {}
          })
          .catch(() => {
            this.$message.error('失败')
          })
        this.dialogVisible = false
      },
      handleCurrentChange(val) {
        const _this = this
        _this.page = val
        this.init()
      },
    },
  }
</script>

<style></style>
